<template>
  <div class="content" @click="returnUpLevel">
    <div ref="chartsRef" style="width: 1000px; height: 550px"></div>
  </div>
</template>

<script lang="ts" setup>
  import * as echarts from 'echarts'
  import zhongguo from '@/assets/mapJson/china.json'
  import name2code from '@/assets/mapJson/map_name2code.json' // 省级 名字 拼音 代码 对照表
  import { ref, onMounted } from 'vue'

  onMounted(() => {
    initCharts()
  })

  const tooltip = {
    // 鼠标移入提示
    show: true,
    trigger: 'item',
    alwaysShowContent: false,
    backgroundColor: '#0C121C',
    borderColor: 'rgba(0, 0, 0, 0.16);',
    hideDelay: 100,
    triggerOn: 'mousemove',
    enterable: true,
    textStyle: {
      color: '#DADADA',
      fontSize: '12',
      width: 20,
      height: 30,
      overflow: 'break',
    },
    showDelay: 100,
    formatter(params: { name: string; value: any }) {
      return `地区：${params.name}</br>数值：${params.value[2]}`
    },
  }

  const geo = {
    map: 'china', //名字是china，南海诸岛会以缩略图展示，但是以此之外来命名地图，则不会展示缩略图。
    label: {
      // 通常状态下的样式
      show: true,
      textStyle: {
        color: '#fff',
      },
      // 鼠标放上去的样式
      emphasis: {
        textStyle: {
          color: '#fff',
        },
      },
    },
    // 地图区域的样式设置
    itemStyle: {
      borderColor: 'rgba(147, 235, 248, 1)',
      borderWidth: 1,
      areaColor: {
        type: 'radial',
        x: 0.5,
        y: 0.5,
        r: 0.8,
        colorStops: [
          {
            offset: 0,
            color: 'rgba(147, 235, 248, 0)', // 0% 处的颜色
          },
          {
            offset: 1,
            color: 'rgba(147, 235, 248, .2)', // 100% 处的颜色
          },
        ],
        globalCoord: false, // 缺省为 false
      },
      shadowColor: 'rgba(128, 217, 248, 1)',
      shadowOffsetX: -2,
      shadowOffsetY: 2,
      shadowBlur: 10,
      // 鼠标放上去高亮的样式
      emphasis: {
        areaColor: '#389BB7',
        borderWidth: 0,
      },
    },
  }

  const series = [
    {
      type: 'scatter', //散点（气泡）图
      coordinateSystem: 'geo',
      symbol: 'pin',
      legendHoverLink: true,
      symbolSize: [60, 60],
      // 这里渲染标志里的内容以及样式
      label: {
        show: true,
        formatter(value: any) {
          return value.data.value[2]
        },
        color: '#fff',
      },
      // 标志的样式
      itemStyle: {
        normal: {
          color: 'rgba(255,0,0,.7)',
          shadowBlur: 2,
          shadowColor: 'D8BC37',
        },
      },
      // 数据格式，其中name,value是必要的，value的前两个值是数据点的经纬度，其他的数据格式可以自定义
      // 至于如何展示，完全是靠上面的formatter来自己定义的
      data: [
        { name: '西藏', value: [91.23, 29.5, 2333] }, // 经度  纬度 数值
        { name: '黑龙江', value: [128.03, 47.01, 1007] },
      ],
      showEffectOn: 'render',
      rippleEffect: {
        brushType: 'stroke',
      },
      hoverAnimation: true,
      zlevel: 1,
    },
    {
      type: 'effectScatter',
      coordinateSystem: 'geo',
      effectType: 'ripple',
      showEffectOn: 'render',
      symbolSize: [8, 8],
      rippleEffect: {
        period: 10,
        scale: 10,
        brushType: 'fill',
      },

      hoverAnimation: true,
      itemStyle: {
        normal: {
          color: 'rgba(255, 235, 59, .7)',
          shadowBlur: 10,
          shadowColor: '#333',
        },
      },
      zlevel: 1,
      data: [
        { name: '北京', value: [116.38141739, 39.9595215, 399] },
        { name: '上海', value: [121.47147309, 31.18985708, 22] },
      ],
    },
    {
      name: '',
      type: 'effectScatter',
      coordinateSystem: 'geo',
      symbolSize: function (val: any) {
        // 涟漪特效动画的散点 波纹大小
        const baseSize = (val[2] / 50) * 3
        if (baseSize >= 10) {
          return 10
        } else if (baseSize <= 3) {
          return 3
        }
        return baseSize
      },
      showEffectOn: 'render',
      rippleEffect: {
        brushType: 'stroke',
        period: 10,
        scale: 7,
        number: 4,
      },
      itemStyle: {
        color: '#FF5959',
        shadowBlur: 10,
        shadowColor: '#FF5959',
      },
      zlevel: 1,
      data: [
        { name: '安徽', value: [117.27190478, 30.9869525, 666] },
        { name: '江西', value: [115.62540309, 28.35185683, 1007] },
      ],
    },
  ]

  const option = ref()
  const chartsRef = ref()
  const chartsInstance = ref()

  function getMapJson(code: number) {
    // const currentProvince = import(`./../assets/mapJson/province/${cnName}.js`)// 导入所有省级数据 普通import
    // return currentProvince.default
    const provinceAll = import.meta.glob('./../../assets/mapJson/province/**.json') // 导入所有省级数据 vite的导入方法

    return provinceAll[`./../../assets/mapJson/province/${code}.json`]() //必须调用
  }

  const currentName = ref('') //用来存放当前的地图名字
  const history = ref<any[]>([]) //用来存放下钻的历史记录
  const currentLevel = ref(0) // 地图层级

  // 下钻
  const goDown = async ({ name }: any) => {
    // name是点击的省份中文名
    console.log(currentLevel.value)
    if (currentLevel.value < 1) {
      ;(window.event as Event).stopPropagation()
      let cnName = (name2code[name] && name2code[name].name) || '' // 省份名的 拼音
      let code = (name2code[name] && name2code[name].code) || '' // 省份名的 数字编码
      if (!echarts.getMap(name)) {
        const newMapJson = await getMapJson(code)
        console.log(newMapJson)
        echarts.registerMap(cnName, newMapJson as any) // 注册地图
      }
      option.value.geo.zoom = 0.8 // 修改option的配置，可以继续自定义
      option.value.geo.map = cnName // 就像上面提到的，这里必须要和注册地图时的名字一致
      option.value.series = null
      chartsInstance.value.setOption(option.value, true) // 重新渲染

      // 保存当前地图名字（省份）
      currentName.value = name
      history.value.push(currentName.value)

      currentLevel.value += 1 // 层级+1
    }
  }

  // 上钻 回钻
  const returnUpLevel = () => {
    //先判断history有没有数据，能不能返回
    if (history.value.length === 0) {
      return false
    }
    const mapname = 'china'
    //取出要返回的那个名字
    const name = history.value.pop()
    //修改地图配置重新绘制地图
    option.value.geo.map = mapname
    // option.value.series[0].map = mapname
    option.value.series = series
    chartsInstance.value.setOption(option.value, true)

    currentName.value = name //修改当前的层级，名字

    currentLevel.value -= 1 // 层级-1
  }

  const initCharts = () => {
    chartsInstance.value = echarts.init(chartsRef.value)
    option.value = {
      backgroundColor: '#404a59', // 背景颜色
      tooltip, // 提示浮窗样式
      geo, // 地图配置
      series,
    }
    // 地图注册，第一个参数的名字必须和option.geo.map一致
    echarts.registerMap('china', zhongguo)

    chartsInstance.value.setOption(option.value)

    // 点击地图下钻
    chartsInstance.value.on('click', goDown)
  }
</script>
